<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="this.query">
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="角色名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="serch">查询</el-button>
				</el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>

			</el-form>
		</el-col>

		<!--列表-->
		<template>
			<el-table :data="pageInfo.rows"
                highlight-current-row
                v-loading="loading"
                @selection-change="handleSelectionChange"
                style="width: 100%;">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>

				<el-table-column prop="key" label="键" width="120" sortable>
				</el-table-column>
				<el-table-column prop="value" label="值" width="200"  sortable>
				</el-table-column>
        <el-table-column prop="intro" label="介绍" width="200"  sortable>
        </el-table-column>


        <el-table-column label="操作" width="300">
          <template scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
            <el-button type="warning" size="small" @click="handleAuth(scope.$index, scope.row)">权限设置</el-button>
          </template>
        </el-table-column>
			</el-table>
		</template>
    <!--分页工具条-->

    <!--工具条-->
    <el-col :span="24" class="toolbar">
    <el-button type="danger" v-on:click="batchDelete">批量删除</el-button>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.query.currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="this.query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        style="float:right;"
        :total="this.pageInfo.total">
    </el-pagination>
    </el-col>
    <!-- 新增/修改弹框 -->
    <el-dialog title="新增/修改" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <el-form :model="saveForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="键" >
          <el-input v-model="saveForm.key" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="值" prop="sn">
          <el-input v-model="saveForm.value" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="介绍" prop="sn">
          <el-input v-model="saveForm.intro" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="saveFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
    
	</section>
</template>
<script>

	export default {
		data() {
			return {

				loading: false,
        pageInfo:{
				  total:0,
          rows:[]
        },
        query:{
				  currentPage:1,
          pageSize:5,
          keyword:''
        },
        selColu:[],
        // 修改和新增相关数据
        saveFormVisible:false, //新增/修改弹出框隐藏
        addFormRules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' } // trigger触发 blur 失焦
          ],
          sn: [
            { required: true, message: '请输入唯一标识', trigger: 'blur' } // trigger触发 blur 失焦
          ]

        },

        saveForm:{
				  id:null,
				  key:"",
          value:"",
          intro:""
        },
        addLoading : false,
        // 权限相关
        authFormVisible:false,
        configPermission:{  // 授权对象
          permissionSns:[]
        },
        isIndeterminate:false,  // 设置 indeterminate 状态，如果是true 标识当前复选框状态不确定
        checkAll:false,   // 就是控制全选框是否勾选上
        permissionTree:[], // 权限树
        allPermissionSns:[], // 如果你想你的复选框被选中 那么就将对应的权限sn放入该数组
        configId:null
			}

		},
		methods: {
		 
		 
     
		  // 设置和保存权限
      handleAuth(index,row){
        this.configId = row.id;
        this.queryallPermissionSns();
        // 弹出设置框
        this.authFormVisible = true
        this.getPermissionTree(); // 获取对应的权限树
        // 获取该角色对应的权限
        this.getConfigPermission()
      },
    
      
		  // 点击编辑的方法
      handleEdit(index,row){
        /**
         * path 是用来标记 父部门们的
         */
        // 显示弹框
        this.saveFormVisible = true;
        let temp = Object.assign({}, row);
        this.saveForm = temp

      },
		  // 点击保存数据
      saveSubmit(){
        var saveForm = this.saveForm;
        var parent = saveForm.parent;
        this.$http.post("/config",this.saveForm)
        .then(result=>{
          result = result.data
          if (result.success){
              // 关弹框
            this.saveFormVisible = false;
            // 回到第一页
            this.query.currentPage = 1
             //刷新页面
            this.getConfigs()
          }else{
            this.$message({message: '请联系管理员!',type: 'warning' });
          }
        }).catch(result=>{
          this.$message({message: '糟糕网络异常,请稍后再试!',type: 'warning' });
        })
      },

		  // 点击新增按钮
      handleAdd(){

        this.saveForm = {
          id:null,
          key:"",
          value:"",
          intro:""
        }
      
        this.saveFormVisible = true;
      },
		  // 批量删除 val所有被选中的行数据 但是都是 对象
      batchDelete(){
        var ids = this.selColu.map(x=>x.id);
        if (ids.length == 0 ){
          this.$message({message: '请选择要删除的部门',type: 'warning' });
          return ;
        }
        this.$http.patch("/config",ids)
            .then(result=>{
              result = result.data
              if (result.success){
                this.$message({message: '删除成功',type: 'success' });
                // 将当前页 设置为 第一页
                this.query.currentPage = 1
                this.getConfigs();
              }else {
                this.$message({message: '请联系管理员!',type: 'warning' });
              }
            }).catch(result=>{
          this.$message({message: '糟糕网络异常,请稍后再试!',type: 'warning' });
        })
      },
      handleSelectionChange(val){
        this.selColu = val;
      },

      // 删除指定
      handleDel(index,row){
        var id = row.id;
        // 发送axios请求
        this.$http.delete("/config/"+id)
        .then(result=>{
          result = result.data
          if (result.success){
            this.$message({message: '删除成功',type: 'success' });
            // 将当前页 设置为 第一页
            this.query.currentPage = 1
            this.getConfigs();
          }else {
            this.$message({message: '请联系管理员!',type: 'warning' });
          }
        }).catch(result=>{
          this.$message({message: '糟糕网络异常,请稍后再试!',type: 'warning' });
        })
      },
      serch(){
        this.query.currentPage = 1;
        this.getConfigs();
      },
			//handleSizeChange更改每页条数的时候
      handleSizeChange(val){
       this.query.pageSize = val;
       this.query.currentPage = 1;
       // 调用查询
        this.getConfigs();
      },
      //handleCurrentChange 页码变化触发
      handleCurrentChange(val){
        this.query.currentPage = val;
        // 调用查询
        this.getConfigs();
      },

			//获取部门列表分页
			getConfigs: function () {
				// 发送后台的请求 axios 每一个axios都请求 http:/localhost:8080
        debugger;
        this.$http.put("/config",this.query)
        .then(result=>{
          console.log(result);

          result = result.data

          if (result.success){
            console.log(result);
            this.pageInfo = result.objData

          }else{
            this.$message({message: '查询失败请联系管理员',type: 'warning' });
          }
        })
        .catch(result =>{
          this.$message({message: '糟糕网络异常,请稍后再试!',type: 'warning' });
        })
        // then

        // catch
			}
		},
		mounted() {
			this.getConfigs();
		}
	};

</script>

<style scoped>

</style>